<template>
	<view>
		<form @submit="formSubmit">
		  <view class="cu-form-group" style="height: 100px;">
		  	<view class="title">头像</view>
		  	<view class="grid col-4 grid-square flex-sub" @click="ChooseImage">
		  		<view class="bg-img guoshao-touxian" >
		  			<image :src="pic" mode="aspectFill" ></image>
		  		</view>
		  		<view class="solids guoshao-choose"  v-if="pic == null">
		  			<text class='cuIcon-cameraadd'></text>
		  		</view>
		  	</view>
		  </view>

		  <view class="cu-form-group"></view>

		  <view class="padding flex flex-direction btn-view">
			  <button class="cu-btn bg-blue margin-tb-sm lg round guoshao-bg" formType="submit">确 定</button>
		  </view>
	  </form>
	</view>
</template>

<script>
	const Config = require('../../utils/config.js');
	const http = require('../../utils/http.js');
	const constants = require('../../utils/constants.js');
	export default {
		data() {
			return {
				request:false,
				pic: '',
				flag:false
			}
		},
		onLoad() {
			this.getTalentInfo();
		},
		methods: {
			ChooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let maxByte = 1024*1024* 2;
						
						if(res.tempFiles[0].size > maxByte){
							uni.showToast({
							    title: '请上传2M内的',
							    // 内容
							    icon: 'none' // 图标
							});
							return;
						}
						that.pic = res.tempFiles[0].path;
						that.flag = true;
					},
					fail(err) {
						let errType = err.errMsg.includes("chooseImage:fail cancel") ? "取消选择" : "选择失败";
						if(err.errMsg === 'chooseImage:fail auth deny'){
							uni.openSetting({
								success(res) {
								},
							})
						}
						
					  },
					  complete(res) {
					  },
				});
			},
			getTalentInfo: function (event) {
			    let that = this;
			    uni.showLoading({
			        title: '加载中'
			    });
			    var params = {
			        url: '/u/my/getTalentInfo',
			        method: 'POST',
			        data: {
			        },
			        callBack: function (res) {
			            uni.hideLoading();
			            if (res.code == 200) {
			               that.pic = res.data.pic;
			            } else {
			                uni.showToast({
			                    title: res.msg,
			                    duration: 2000,
			                    icon: 'none'
			                });
			            }
			        }
			    };
			    http.request(params);
			},
			
			formSubmit: function (event) {
				
				let that = this;
				
				uni.showLoading({
				    title: '提交中'
				});
				if(!that.flag){
					uni.navigateBack({
						
					})
					return;
				}
				//图片上传
				uni.uploadFile({
				  baseUrl:true,
				  url: Config.domain +"/u/my/updateTalentAvatar",
				  filePath: that.pic,
				  name: 'file',
				  header: {
					 Authorization: uni.getStorageSync(constants.USER_TOKEN_KEY) ,
				    'accept': 'application/json'
				  },
				  formData:{},
				  success: function(res){
					if(res.statusCode == 200 || res.statusCode == undefined){
						res = JSON.parse(res.data);
						if (res.code == 200) {
							uni.hideLoading();
							that.setData({
								pic:null
							});
							uni.showToast({
								title: '修改成功',
								duration: 2000,
								icon:'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									
								})
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
					
				  },
				  fail: function(res){
				  },
				})
			},
		}
	}
</script>

<style>
@import '../../colorui/main.css';
@import '../../colorui/icon.css';


page {
    background: white;
}

.word {
    margin-top: -30px;
    position: absolute;
    margin-left: 20px;
}

.cu-form-group .title {
    min-width: calc(4em + 15px);
}

.guoshao-bg{
	background-color: #5677fc;
}

.guoshao-choose{
	float: left !important;
	position: absolute !important;
	margin-top: 0px !important;
}

.guoshao-touxian{
	width: 80px !important;
	height: 20px !important;
}
.btn-view{
	bottom: 0;
	position: fixed;
	width: 92%;
}
</style>
